<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>表单常用控件</title>
	</head>
	<body>
		<form action="https://search.jd.com/search" target="_blank">
			<!-- 隐藏域 -->
			<input type="hidden" name="id" value="007" />

			<fieldset>
				<legend>主要信息</legend>
				<label for="account">账户：</label>
				<input type="text" id="account" name="account" value="zhangsan" maxlength="10" required disabled />
				<br />

				<label>
					密码：
					<input type="password" id="pwd" name="pwd" value="123456" maxlength="10" required />
				</label>
				<br />

				<label>性别:</label>
				<label>
					<input type="radio" name="gender" value="male" checked />
					男
				</label>
				<label>
					<input type="radio" name="gender" value="female" />
					女
				</label>
			</fieldset>

			<br />

			<fieldset>
				<legend>附加信息</legend>
				<label>爱好：</label>
				<input type="checkbox" id="sport" name="hobby" value="sport" checked />
				<label for="sport">运动</label>
				<input type="checkbox" id="reading" name="hobby" value="reading" />
				<label for="reading">阅读</label>
				<input type="checkbox" id="swimming" name="hobby" value="swimming" />
				<label for="swimming">游泳</label>
				<br />

				<label for="other">其他：</label>
				<!-- rows控制高 cols控制宽 -->
				<textarea id="other" cols="30" rows="5" name="other"></textarea>
				<br />

				<label for="city">籍贯：</label>
				<select id="city" name="city">
					<option value="beijing" selected>北京</option>
					<option value="shanghai">上海</option>
					<option value="guangzhou">广州</option>
				</select>
			</fieldset>

			<br />

			<!-- 表单中的 button 元素, 默认 type 类型是 submit, 点击后会提交表单数据, 如果想要一个"普通按钮"则需要把 type 类型设置为 button -->
			<!-- 确认提交第一种写法 -->
			<button>确认</button>
			<!-- 确认提交第二种写法 value="确认" -->
			<!-- <input type="submit" /> -->

			<!-- 重置按钮第一种写法 -->
			<button type="reset">重置</button>
			<!-- 重置按钮第二种写法 value="重置" -->
			<!-- <input type="reset" /> -->

			<!-- 表单里的普通按钮 -->
			<button type="button" onclick="alert('Hello World!')">检查账户是否被注册</button>
			<!-- <input type="button" onclick="alert('Hello World!')" value="检查账户是否被注册" /> -->
		</form>
	</body>
</html>
